<template>
	<div class="common-layout">
		<el-header>个人</el-header>
		<el-container>
			<el-aside>
				<el-menu default-active="1">
					<el-menu-item index="1" @click="i=1">上传头像</el-menu-item>
					<el-menu-item index="2" @click="i=2">修改密码</el-menu-item>
					<el-menu-item index="3" @click="i=3">修改名称 电话</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main>
				<template v-if="i==1">
					<el-form>
						<el-form-item>
							<el-image style="width: 100px; height: 100px" fit="fill" :src="`${$Imgurl}/showImg/${img}`"></el-image>
							<el-upload list-type="picture" :limit="1" :multiple="false" :auto-upload="false" action="#" :file-list="fileList" @change="change">
								<h2>点击此处<br/>选择头像图片</h2>
							</el-upload>
							<el-button type="text" @click="uploadImg()">点击上传</el-button>
						</el-form-item>
					</el-form>
				</template>
				<template v-if="i==2">
					<el-form>
						<el-form-item>
							<el-input placeholder="请输入密码" v-model="password" type="password"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input placeholder="请再次输入密码" v-model="n_password" type="password"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button @click="getPass()">确认</el-button>
						</el-form-item>
					</el-form>
				</template>
				<template v-if="i==3">
					<el-form>
						<el-form-item>
							<el-input placeholder="昵称" v-model="name"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input placeholder="电话" v-model="phone"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button @click="getInf()">确认</el-button>
						</el-form-item>
					</el-form>
				</template>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	//引入拦截器
	import instance from '../../../../ajax'
	import { ElMessage } from 'element-plus'
	
	export default{
		name:'Information',
		data(){
			return{
				i:1,
				password:'',
				n_password:'',
				name:'',
				phone:'',
				img:'',
				fileList:[]
			}
		},
		methods:{
			getPass(){
				if(this.password==this.n_password&&this.password!=''){
					instance.post('/api/fore/user/updatePwd',this.$qs.stringify({pwd:this.password}),{
						headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}
					}).then((res)=>{
						if (res.data.code==200) {
							ElMessage({
								showClose: true,
							    message: '密码更新成功',
							    type: 'success',
							  })
						}
					}).catch((error)=>{
						
					})
				}
			},
			uploadImg(){
				let fs=this.fileList
				if (fs.length>0&&fs[0]!='') {
					let fd=new FormData()
					fd.append('img',fs[0])
					
					instance.post('/api/fore/user/updateImg',fd,{
						header:{'Content-Type':'multipart/form-data'}
					}).then((res)=>{
						if (res.data.code==200) {
							ElMessage({
								showClose: true,
							    message: '头像已更新',
							    type: 'success',
							  })
						}
					}).catch((error)=>{
						
					})
				}
			},
			getInf(){
				if(this.name!=''&&this.phone!=''){
					instance.post('/api/fore/user/updateInfo',this.$qs.stringify({nickname:this.name,phone:this.phone}),{
						headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}
					}).then((res)=>{
						if (res.data.code==200) {
							ElMessage({
								showClose: true,
							    message: '信息修改成功',
							    type: 'success',
							  })
						}
					}).catch((error)=>{
						
					})
				}
			},
			change(file, fileList) {
				this.fileList=fileList
			}
		},
		created() {
			this.img=localStorage.getItem('img')
		}
	}
</script>

<style scoped>
	.el-form-item{
		width: 30%;
	}
	.el-form-item .el-button{
		width: 100%;
	}
	.el-form-item:first-child .el-button{
		width: 50%;
	}
	.el-form-item .el-upload h2{
		width: 150px;
		height: 150px;
		border: 5px dotted gainsboro;
		font-weight: bold;
		font-size: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
